<template>
  <div class="step-form-wrapper">
    <el-form :model="memberForm" label-width="100px" class="form-section">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="成员姓名" class="required-field">
            <el-input v-model="memberForm.name" size="large" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="角色" class="required-field">
            <el-select v-model="memberForm.role" placeholder="选择角色" size="large">
              <el-option label="管理员" value="admin" />
              <el-option label="业务员" value="sales" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话">
            <el-input v-model="memberForm.phone" size="large" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="备注">
            <el-input v-model="memberForm.remark" type="textarea" :rows="2" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="action-separator">
      <el-button type="primary" @click="saveMember" class="save-btn">保存并新增</el-button>
    </div>

    <el-table :data="memberList" border class="data-table">
      <el-table-column prop="id" label="序号" width="60" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="role" label="角色" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作"  >
          <template #default>
              <el-button type="text" size="small">修改</el-button>
              <el-button type="text" size="small" style="color: red;">删除</el-button>
          </template>
      </el-table-column>
    </el-table>

    <div class="bottom-nav">
      <el-button @click="emit('prev')" class="prev-btn">上一步</el-button>
      <el-button type="success" @click="handleFinish" class="finish-btn">完成</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['prev', 'finish']);
const memberForm = ref({ name: '', role: '', phone: '', remark: '' });
const memberList = ref([
  { id: 1, name: '张三', role: '管理员', phone: '138****0000', remark: '系统最高权限' },
  { id: 2, name: '李四', role: '业务员', phone: '139****1111', remark: '负责华南地区' },
]);

const saveMember = () => { console.log('保存成员:', memberForm.value); };
const handleFinish = () => { emit('finish'); };
</script>

<style scoped>
/* 通用样式 */
.form-section { padding: 20px 0; }
.action-separator { text-align: center; margin: 30px 0; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.bottom-nav { margin-top: 20px; display: flex; justify-content: space-between; }
.required-field :deep(.el-form-item__label)::before { content: '*'; color: red; margin-right: 4px; }
.save-btn { background-color: #409eff; border-color: #409eff; }
.prev-btn { background-color: #fff; color: #333; border: 1px solid #ccc; }
.finish-btn { background-color: #55b95a; border-color: #55b95a; }
</style>